@layout ProfileLayout
@page "/admin/profile/"
@inject HttpClient _http
@inject IStringLocalizer<Resource> _localizer
@inject IToaster _toaster

<PageTitle Title="@_localizer["edit-profile"]" />

<h1 class="section-title">@_localizer["edit-profile"]</h1>
<div class="section-content -half">
   @if (Author != null)
   {
      <EditForm Model="@Author" OnValidSubmit="SaveProfile">
         <DataAnnotationsValidator />
         <div class="form-item">
            <label class="form-label mb-1">@_localizer["profile-picture"]</label>
            <div class="d-flex">
                <img src="@Author.Avatar" width="39" height="39" class="profilePicture rounded me-3" alt="@Author.DisplayName" />
                <button class="btn btn-link" onclick="return fileManager.uploadClick('@UploadType.Avatar');" type="button" title="@_localizer["upload"]" data-bs-toggle="tooltip">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
                    </svg>
                </button>
                <button class="btn btn-link" @onclick="ResetAvatar" type="button" title="@_localizer["reset"]" data-bs-toggle="tooltip">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                </button>
            </div>
         </div>
         <div class="form-item">
            <label class="form-label">@_localizer["name"]</label>
            <input class="form-control" type="text" @bind="Author.DisplayName" />
            <ValidationMessage For="@(() => Author.DisplayName)"></ValidationMessage>
         </div>
         <div class="form-item">
            <label class="form-label">@_localizer["email"]</label>
            <input class="form-control" type="email" @bind="Author.Email" />
            <ValidationMessage For="@(() => Author.Email)"></ValidationMessage>
         </div>
         <div class="form-item">
            <label class="form-label">@_localizer["user-bio"]</label>
            <textarea class="form-control" rows="4" @bind="Author.Bio" />
         </div>
         <div class="form-item">
            <button type="submit" class="btn btn-blogifier px-5">@_localizer["save"]</button>
         </div>
      </EditForm>
   }

</div>

<ToasterComponent @ref="Toaster" />

@code {
   protected Author Author { get; set; }
   protected RegisterModel Model { get; set; }
   protected ToasterComponent Toaster;

   protected override async Task OnInitializedAsync()
   {
       await Load();
   }

   protected async Task Load()
   {
       Author = await _http.GetFromJsonAsync<Author>("api/author/getcurrent");
       Model = new RegisterModel
       {
           Name = Author.DisplayName,
           Email = Author.Email
       };
   }

   protected async Task SaveProfile()
   {
       Toaster.Toast(await _http.PutAsJsonAsync<Author>("api/author/update", Author));
       await Load();
   }

   protected async Task ResetAvatar()
   {
       Author.Avatar = string.Format(Constants.AvatarDataImage, Author.DisplayName.Substring(0, 1).ToUpper());
       await SaveProfile();
   }
}
